bootstrap前端框架，是目前全球最流行的前端样式。 由于目前网上没有一个基于bootstrap v4.x的与vue cli 4.x结合引用的教程，所以不才动手，整理一下，希望于大家有用。
本教程同时还结合与bootstrap 4中文官方站http://code.z01.com/v4 生态，将zico图标库一并讲解。
# 方法一：在Vue cli4中，可以直接加载BootstrapVue插件，此插件引用后，则需要使用专用的标签来使用，比如导航栏则需要写作为：
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template v-slot:button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
引用方法很方便，你即可以在vue cli中，直接点插件工具，然后搜索@vue/cli-plugin-router，增加引用就可。
这样引用要注意，引用最后一步要修改文件，需要点击保存，否则就会失效。
或者你直接运行下面两条命令之一即可完成安装。
vue add bootstrap-vue npm i vue-cli-plugin-bootstrap-vue
# 方法二：如果你对原生的html更熟悉，则可以采用手工方法，分别引入Jquery、zico和Bootstrap
先是在项目的根目录中运行npm：
#第一步，分别在项目文件目录运行npm获取四个插件（其中bootstrap需要引用popper.js)
npm installjquery --save-dev
npm install zico -D
npm install bootstrap -D
npm install popper.js -D
1
2
3
4
5
6
2
3
4
5
6
然后在src目录下找到main.js操作：
#第二步，在main.js中引用相关方法
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 自定义引用bootstrap和zico
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "zico/css/zico.min.css";
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
最后回到根目录进行操作：
#第三步，检查package.json中是否有引用，没有则补上，注意下方dependencies段落：
{
"name": "vuecli-homepage",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.4",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"zico": "^1.5.1"
},
"devDependencies": {
......
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
上面三步完成后，就可以自由的采用原生的bootstrap代码和标准的html来写作了，直接拷贝 code.z01.com/v4官方站的代码提升开发效率。
这样你就可以直接引用原生的bootstrap4和zico代码，在vue中进行原生的开发了。
效果如下所示：
好了，祝你开发愉快，来自逐浪CMS团队www.z01.com，16年专注研发高端CMS。